<!-- emmet语法 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./res/font-awesome-4.7.0/css/font-awesome.css">
</head>

<body>
    <div id="app" class="flex-column">
        <div class="head flex-row">
            <div class="home-icon flex-center">
                <i class="fa fa-home fa-2x"></i>
            </div>
            <div class="music-name flex-center">李荣浩 - 李白</div>
            <div class="share-icon flex-center">
                <i class="fa fa-share fa-2x"></i>
            </div>
        </div>
        <div class="body flex-center">
            <!-- 毛玻璃背景 -->
            <img class="body-bg" src="./img/05.jpg" alt="">
            <!-- 唱片区域 -->
            <div class="cover flex-center">
                <img class="cover-img" src="./img/05.jpg" alt="">
                <img class="cover-disc" src="./img/disc.png" alt="">
            </div>
        </div>
        <div class="foot flex-column">
            <div class="box-time flex-row">
                <div class="time-now">01:22</div>
                <div class="time-total">04:34</div>
            </div>
            <!-- 进度条 -->
            <div class="box-progress">
                <!-- 进度条触摸区域 -->
                <div class="progress-touch flex-center">
                    <!-- 进度轨道 -->
                    <div class="progress-bg">
                        <!-- 实际进度 -->
                        <div class="progress"></div>
                    </div>
                </div>
            </div>
            <div class="box-btns flex-row">
                <button class="btn-loop">
                    <i class="fa fa-random"></i>
                </button>
                <button class="btn-prev">
                    <i class="fa fa-step-backward fa-2x"></i>
                </button>
                <button class="btn-play-pause">
                    <i class="fa fa-play fa-3x"></i>
                </button>
                <button class="btn-next">
                    <i class="fa fa-step-forward fa-2x"></i>
                </button>
                <button class="btn-list">
                    <i class="fa fa-list"></i>
                </button>
            </div>
        </div>
    </div>
    <!-- 歌曲列表对话框 -->
    <div id="music-list-dialog">
        <!-- 关闭列表按钮 -->
        <span id="btn-close">
            <i class="fa fa-times-circle"></i>
        </span>
        <!-- 歌曲列表 -->
        <ul id="music-list"></ul>    
    </div>
    
    <!-- 引入jquery库 -->
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>